{% load i18n humanize helpers %}

<a class="card chart-card overflow-visible ~neutral !low service mb-6 p-0" href="{% contextual_url 'dashboard:service' object.uuid %}">
    {% with stats=object.stats %}
    <div class="p-4 md:flex justify-between overflow-none">
        <div class="flex items-center mb-4 md:mb-0 md:flex-1 md:min-w-0 truncate pr-0 md:pr-2">
            <h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600 flex items-center truncate" title="{{object.name}}">
                {{object.link|iconify}}
                <span class="truncate">{{object.name}}</span>
            </h3>
            {% include 'dashboard/includes/stats_status_chip.html' %}
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-3 lg:gap-6 md:flex-none">
            <div>
                <p>{% trans 'Sessions' %}</p>
                <p class="label">
                    {{stats.session_count|intcomma}}
                    {% compare stats.compare.session_count stats.session_count "UP" %}
                </p>
            </div>
            <div>
                <p>{% trans 'Hits' %}</p>
                <p class="label">
                    {{stats.hit_count|intcomma}}
                    {% compare stats.compare.hit_count stats.hit_count "UP" %}
                </p>
            </div>
            <div>
                <p>{% trans 'Bounce Rate' %}</p>
                <p class="label">
                    {% if stats.bounce_rate_pct != None %}
                    {{stats.bounce_rate_pct|floatformat:"-1"}}%
                    {% else %}
                    ?
                    {% endif %}
                    {% compare stats.compare.bounce_rate_pct stats.bounce_rate_pct "DOWN" %}
                </p>
            </div>
            <div>
                <p>{% trans 'Avg. Duration' %}</p>
                <p class="label">
                    {% if stats.avg_session_duration != None %}
                    {{stats.avg_session_duration|naturaldelta}}
                    {% else %}
                    ?
                    {% endif %}
                    {% compare stats.compare.avg_session_duration stats.avg_session_duration "UP" %}
                </p>
            </div>
        </div>
    </div>
    <hr class="sep h-4">
    <div style="bottom: -1px;">
        {% include 'dashboard/includes/time_chart.html' with data=stats.chart_data sparkline=True height=100 name=object.uuid tooltip_format=stats.chart_tooltip_format granularity=stats.chart_granularity %}
    </div>
    {% endwith %}
</a>
